<template>
    <div class="${entityName?uncap_first}">

        <div class="searchArea">
            <span style="font-size: 13px"> 内容：</span>
            <el-input
                    class="nameInput"
                    placeholder="请输入内容"
                    size="small">
            </el-input>
            <el-button type="primary" size="small" icon="el-icon-search" @click="loadData">搜索</el-button>
            <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>

        <div class="actionArea">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
        </div>

        <div class="dataArea">
            <el-table
                    :header-cell-style="{'text-align':'center','height':'49px','color':'black','background-color':'rgb(250,250,250)'}" m
                    :cell-style="{'text-align':'center'}"
                    border
                    size="small"
                    @handleSelectionChange="handleSelectionChange"
                    :data="${entityName?uncap_first}List"
            >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <#list fields as f>
                    <#if  f.fieldName != 'id' && f.fieldName!='updateTime'>
                        <el-table-column
                                prop="${f.fieldName}"
                                label="${f.fieldDescribe}"
                        >
                        </el-table-column>
                    </#if>
                </#list>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button type="text" size="small" style="margin-right: 10px" @click="openEditDialog(scope.row)">编辑</el-button>
                        <el-popconfirm
                                title="确定要删除该记录吗？"
                                icon="el-icon-delete"
                                @onConfirm="confirmDelete${entityName?cap_first}(scope.row.id)"
                        >
                            <el-button type="text" slot="reference" style="color: red" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>

                </el-table-column>
            </el-table>

            <div class="page">
                <el-pagination
                        background
                        :current-page="page.pageNo"
                        :page-size="page.pageSize"
                        :total="page.total"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-sizes="[10,20,30,40]"
                        layout=" total,prev, pager, next,sizes, jumper"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog :visible.sync="showAddDialog"
                   title="添加"
                   :close-on-click-modal="false"
                   class="addDialog">
            <el-form :model="add${entityName?cap_first}"
                     ref="addForm" label-position="left"
                     label-width="80px" :rules="rules">
                <#list fields as f>
                    <#if  f.fieldName != 'id' && f.fieldName!='updateTime' && f.fieldName!='createTime' && f.fieldType=='Date'>
                        <el-form-item
                                prop="${f.fieldName}"
                                label="${f.fieldDescribe}"
                        >
                            <el-date-picker placeholder="请输入${f.fieldDescribe}" value-format="yyyy-MM-dd HH:mm:ss" v-model="add${entityName?cap_first}.${f.fieldName}"></el-date-picker>
                        </el-form-item>
                    <#elseif  f.fieldName != 'id' && f.fieldName!='updateTime' && f.fieldName!='createTime' && f.fieldType!='Date'>
                        <el-form-item
                                prop="${f.fieldName}"
                                label="${f.fieldDescribe}"
                        >
                            <el-input placeholder="请输入${f.fieldDescribe}" v-model="add${entityName?cap_first}.${f.fieldName}"></el-input>
                        </el-form-item>
                    </#if>
                </#list>
            </el-form>
            <div style="text-align: right">
                <el-button type="danger" size="small" style="border-radius: 0" @click="closeAddDialog">取消</el-button>
                <el-button type="primary" size="small" style="border-radius: 0" @click="confirmAdd${entityName?cap_first}">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="showEditDialog"
                   title="修改信息"
                   :close-on-click-modal="false"
                   class="editDialog">
            <el-form :model="edit${entityName?cap_first}" ref="editForm" label-position="left" label-width="80px" :rules="rules">
                <#list fields as f>
                    <#if  f.fieldName != 'id' && f.fieldName!='updateTime' && f.fieldName!='createTime' && f.fieldType=='Date'>
                        <el-form-item
                                prop="${f.fieldName}"
                                label="${f.fieldDescribe}"
                        >
                            <el-date-picker placeholder="请输入${f.fieldDescribe}" value-format="yyyy-MM-dd HH:mm:ss" v-model="edit${entityName?cap_first}.${f.fieldName}"></el-date-picker>
                        </el-form-item>
                    <#elseif  f.fieldName != 'id' && f.fieldName!='updateTime' && f.fieldName!='createTime' && f.fieldType!='Date'>
                        <el-form-item
                                prop="${f.fieldName}"
                                label="${f.fieldDescribe}"
                        >
                            <el-input placeholder="请输入${f.fieldDescribe}" v-model="edit${entityName?cap_first}.${f.fieldName}"></el-input>
                        </el-form-item>
                    </#if>

                </#list>
            </el-form>
            <div style="text-align: right">
                <el-button type="danger" size="small" style="border-radius: 0" @click="closeEditDialog">取消</el-button>
                <el-button type="primary" size="small" style="border-radius: 0" @click="confirmEdit${entityName?cap_first}">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {getAction, postAction} from "@/utils/http";
    import {Message} from "element-ui";

    export default {
        name: "${entityName?uncap_first}",
        data() {
            return {
                showAddDialog: false,
                showEditDialog: false,
                add${entityName?cap_first}: {
                    username: '',
                    password: '',
                    birthday: ''
                },
                edit${entityName?cap_first}: {},
                ${entityName?uncap_first}List: [],
                page: {
                    pageNo: 1,
                    pageSize: 10,
                    total: 0
                },
                rules: {
                    <#list fields as f>
                    <#if f.fieldName!="id" && f.fieldName!="updateTime" &&f.fieldName!="createTime">
                    ${f.fieldName}: [{required: true, message: '请输入${f.fieldDescribe}', trigger: 'blur'}],
                    </#if>
                    </#list>
                },
                searchParams: {},
                selectedList: [],
                urls: {
                    list: "/${entityName?uncap_first}/${entityName?uncap_first}/list",
                    queryList: "/${entityName?uncap_first}/${entityName?uncap_first}/queryList",
                    add: "/${entityName?uncap_first}/${entityName?uncap_first}/add",
                    edit: "/${entityName?uncap_first}/${entityName?uncap_first}/edit",
                    deleteById: "/${entityName?uncap_first}/${entityName?uncap_first}/deleteById",
                    deleteBatch: "/${entityName?uncap_first}/${entityName?uncap_first}/deleteBatch"
                }
            }
        },
        created() {
            this.loadData()
        },
        methods: {
            reset() {
                this.searchParams = {}
                this.page.total = 0
                this.page.pageSize = 10
                this.page.pageNo = 1
                this.loadData()
            },
            handleCurrentChange(val) {
                this.page.pageNo = val
                this.loadData()
            },
            handleSizeChange(val) {
                this.page.pageSize = val
                this.loadData()
            },
            loadData() {
                let params = {
                    ...this.page,
                    ...this.searchParams
                }
                getAction(this.urls.list, params).then(res => {
                    if (res.success) {
                        let {records, current, size, total} = res.result
                        this.${entityName?uncap_first}List = records
                        this.page.pageNo = current
                        this.page.pageSize = size
                        this.page.total = total
                    }
                })
            },
            openAddDialog() {
                this.showAddDialog = true
                this.add${entityName?cap_first} = {}
                if (this.$refs['addForm'] !== undefined) {
                    this.$refs['addForm'].resetFields();
                }
            },
            closeAddDialog() {
                this.showAddDialog = false
            },
            openEditDialog(${entityName?uncap_first}) {
                this.edit${entityName?cap_first} = Object.assign({}, ${entityName?uncap_first})
                this.showEditDialog = true
            },
            closeEditDialog() {
                this.showEditDialog = false
                this.$refs.editForm.resetFields()
            },
            confirmAdd${entityName?cap_first}() {
                console.log(this.add${entityName?cap_first})
                this.$refs.addForm.validate(valid => {
                    if (valid) {
                        postAction(this.urls.add, this.add${entityName?cap_first}).then(res => {
                            if (res.success) {
                                this.add${entityName?cap_first} = {}
                                this.showAddDialog = false
                                Message.success("添加成功！");
                                this.loadData()
                            }
                        })
                    }
                })

            },
            confirmDelete${entityName?cap_first}(id) {
                getAction(this.urls.deleteById, {id}).then(res => {
                    if (res.success) {
                        Message.success("删除成功！");
                        this.loadData()
                    }
                })
            },
            confirmEdit${entityName?cap_first}() {
                this.$refs.editForm.validate(valid => {
                    if (valid) {
                        postAction(this.urls.edit, this.edit${entityName?cap_first}).then(res => {
                            if (res.success) {
                                this.showEditDialog = false
                                this.edit${entityName?cap_first} = {}
                                Message.success("修改成功！")
                                this.loadData()
                            }

                        })
                    }
                })
            },
            handleSelectionChange(val) {
                this.selectedList = val
            },
        }
    }
</script>

<style scoped lang="scss">
    .${entityName?uncap_first} {
        padding: 20px;

        .dataArea {
            margin-top: 20px;

            .page {
                text-align: center;
                margin-top: 20px;
            }
        }

        .actionArea {
            margin-top: 20px;
        }

        .searchArea {
            .nameInput {
                margin-right: 20px;
                width: 180px;
            }
        }

        .editDialog {
            width: 1200px;
            margin: 0 auto;
        }

        .addDialog {
            width: 1200px;
            margin: 0 auto;
        }
    }
</style>

<style>
    .searchArea .el-button {
        border-radius: 0;
    }

    .actionArea .el-button {
        border-radius: 0;
    }

    .nameInput input {
        border-radius: 0;
    }

    .editDialog input, .addDialog input {
        border-radius: 0;
    }
</style>
